<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <title>Title</title>
    <style>

        #img{
            background-image: url("image/bannerbg.png");
            height: 500px;
        }

        nav{
            color: white;
        }
        #navheader{
            padding-top: 10px;
        }
        .ulimg img{
            height: 300px;
            width: 200px;
        }
        .ulimg{
            height: 350px;
            width: 210px;
            border: 1px solid grey;
            text-align: center;
        }
        .ulimg1{
            height: 370px;
            width: 210px;
            border: 1px solid grey;
            text-align: center;
        }

        #ul3{
            width: 310px;
            border: 1px solid grey;
            line-height: 10px;
        }
        #img1{
            width: 1450px;
            height: 150px;
            padding-left: 130px;
        }
        #title{
            width: 280px;
            height: 50px;
            text-align: center;
            background-color: deepskyblue;

        }
        #title p{
            padding-top: 10px;
            color: white;
        }
        #title span{
            font-size: 24px;
        }
    </style>
</head>
<body>
<header>
    <nav class="navbar-inverse" id="navheader">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="image/footer_logo.png" style="padding-left: 120px;margin-top: -10px">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">全国</a></li>
                    <li><a href="#">电影</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">演出<span class="caret"></span></a>
                        <ul class="dropdown-menu" style="background-color: black">
                            <li><a href="#" style="color: white">Action</a></li>
                            <li><a href="#" style="color: white">Another action</a></li>
                            <li><a href="#" style="color: white">Something else here</a></li>
                            <li role="separator" class="divider" style="color: white"></li>
                            <li><a href="#" style="color: white">Separated link</a></li>
                            <li role="separator" class="divider" style="color: white"></li>
                            <li><a href="#" style="color: white">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a href="#">我的微票</a></li>
                </ul>
                <form class="navbar-form navbar-left" style="padding-left: 500px">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入电影名">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登陆</a></li>
                    <li><a href="#">注销</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>
<section id="img">
    <div class="row">
        <div class="col-md-7"  style="padding-top: 50px;margin-left: 50px">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="image/1.jpg"alt="First slide">
                    </div>
                    <div class="item">
                        <img src="image/2.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="image/3.jpg" alt="Third slide">
                    </div>
                    <div class="item">
                        <img src="image/4.jpg" alt="Four slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

        </div>
        <div class="col-md-3 col-md-offset-2" style="padding-left: 270px;margin-left:0px;margin-top: 50px">
            <ul style="background-color: white;width: 300px;list-style-type: none">
                <li><strong style="font-size: 24px">特惠看</strong></li>
                <li><img src="image/img1.jpg"/></li>
                <li><span style="">[苏州]2016音乐节</span></li>
                <li><span style="">测试</span></li>
                <li><span style="">测试</span></li>
            </ul>
        </div>
    </div>
</section>
<br/>
<br/>
<div class="row">
    <div class="col-md-1 col-md-offset-1">
        <div class="thumbnail ulimg">
            <img src="image/5.jpg"/><span>[上海]百老汇经典音乐剧《狮子王》</span>
        </div>
    </div>
    <div class="col-md-1 col-md-offset-1 ">
        <div class="thumbnail ulimg">
            <img src="image/6.jpg"/><span>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</span>
        </div>
    </div>
    <div class="col-md-1 col-md-offset-1">
        <div class="thumbnail ulimg">
            <img src="image/7.jpg"/><span>[深圳]逃跑计划2016巡回演唱会深圳站</span>
        </div>
    </div>
    <div class="col-md-1 col-md-offset-1">
        <div class="thumbnail ulimg">
            <img src="image/8.jpg"/><span>[北京]BJCC北京漫控潮流博览会</span>
        </div>
    </div>
    <div class="col-md-2 col-md-offset-1 thumbnail" id="ul3">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">
                首页</a>
            </li>
            <li><a href="#ios" data-toggle="tab">技能课</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <img src="image/img2.jpg">
                <br/>
                <br/>
                <p>[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
                <hr/>
                <p>[太原]蔡依林2016PLAY世界巡回演唱会</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p></p>
            </div>
        </div>
    </div>
</div>
<img src="image/ad1.jpg" id="img1"/>
<hr/>
<div class="row">
    <div class="col-md-8 col-md-offset-1">
        <ul name="myTab" class="nav nav-tabs">
            <li class="active"><a href="#homes" data-toggle="tab">演唱会</a>
            </li>
            <li><a href="#ioss" data-toggle="tab">体育赛事</a></li>
            <li><a href="#ioss" data-toggle="tab">舞台剧</a></li>
            <li><a href="#ioss" data-toggle="tab">儿童亲子</a></li>
            <li><a href="#ioss" data-toggle="tab">音乐会</a></li>
            <li><a href="#ioss" data-toggle="tab">展览活动</a></li>
        </ul>
        <br/>
        <div name="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="homes">
                <div class="col-md-3">
                    <div class="thumbnail ulimg1">
                        <img src="image/9.jpg"/><span>[深圳]逃跑计划2016巡回演唱会深圳站</span>
                        <p><span style="color: skyblue;font-size: 24px">180</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3  ">
                    <div class="thumbnail ulimg1">
                        <img src="image/10.jpg"/><span>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</span>
                        <p><span style="color: skyblue;font-size: 24px">999</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <div class="thumbnail ulimg1">
                        <img src="image/11.jpg"/><span>[青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)</span>
                        <p><span style="color: skyblue;font-size: 24px">380</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <div class="thumbnail ulimg1">
                        <img src="image/12.jpg"/><span>[太原]周杰伦2016世界巡回演唱会太原站(预售)</span>
                        <p><span style="color: skyblue;font-size: 24px">380</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="thumbnail ulimg1">
                        <img src="image/13.jpg"/><span>[深圳]逃跑计划2016巡回演唱会深圳站</span>
                        <p><span style="color: skyblue;font-size: 24px">180</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3  ">
                    <div class="thumbnail ulimg1">
                        <img src="image/14.jpg"/><span>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</span>
                        <p><span style="color: skyblue;font-size: 24px">999</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <div class="thumbnail ulimg1">
                        <img src="image/15.jpg"/><span>[青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)</span>
                        <p><span style="color: skyblue;font-size: 24px">380</span>元起<p/>
                    </div>
                </div>
                <div class="col-md-3 ">
                    <div class="thumbnail ulimg1">
                        <img src="image/16.jpg"/><span>[太原]周杰伦2016世界巡回演唱会太原站(预售)</span>
                        <p><span style="color: skyblue;font-size: 24px">380</span>元起<p/>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="ioss">
                <p></p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div id="title">
            <p><span>历历在目</span>-尽享每天不一样的精彩</p>
        </div>
        <br/>
        <p>今天共演出<span style="color:skyblue;">9</span>场</p>
        <ul style="list-style-type: none">
            <li>
                <div class="row" style="margin-left: -50px">
                    <div class="col-md-1">
                        <img src="image/img4.jpg"/>
                    </div>
                    <div class="col-md-7 col-md-offset-2">
                        <span style="font-size: 16px;">[天津]天津中华曲苑相声专场</span>
                        <p>2016年1月1日~12月31日 天津中华曲苑</p>
                        <p><span style="color: deepskyblue;font-size: 20px">50</span>元起</p>
                    </div>
                </div>
            </li>
            <hr/>
            <li>
                <div class="row" style="margin-left: -50px">
                    <div class="col-md-1">
                        <img src="image/img4.jpg"/>
                    </div>
                    <div class="col-md-7 col-md-offset-2">
                        <span style="font-size: 16px;">[天津]天津中华曲苑相声专场</span>
                        <p>2016年1月1日~12月31日 天津中华曲苑</p>
                        <p><span style="color: deepskyblue;font-size: 20px">50</span>元起</p>
                    </div>
                </div>
            </li>
            <hr/>
            <li>
                <div class="row" style="margin-left: -50px">
                    <div class="col-md-1">
                        <img src="image/img4.jpg"/>
                    </div>
                    <div class="col-md-7 col-md-offset-2">
                        <span style="font-size: 16px;">[天津]天津中华曲苑相声专场</span>
                        <p>2016年1月1日~12月31日 天津中华曲苑</p>
                        <p><span style="color: deepskyblue;font-size: 20px">50</span>元起</p>
                    </div>
                </div>
            </li>
            <hr/>
            <li>
                <div class="row" style="margin-left: -50px">
                    <div class="col-md-1">
                        <img src="image/img4.jpg"/>
                    </div>
                    <div class="col-md-7 col-md-offset-2">
                        <span style="font-size: 16px;">[天津]天津中华曲苑相声专场</span>
                        <p>2016年1月1日~12月31日 天津中华曲苑</p>
                        <p><span style="color: deepskyblue;font-size: 20px">50</span>元起</p>
                    </div>
                </div>
            </li>
            <hr/>
        </ul>
        <span style="color:deepskyblue;">查看今天全部演出</span>
    </div>
</div>




<div class="container" style="text-align: center">
    <div class="row">
        <div class="col-md-2">
            <p style="font-size: 26px">场馆推荐</p>
        </div>
        <div class="col-md-8 col-md-offset-2">
            <p style="color: deepskyblue">全部演出</p>
        </div>

    </div>
</div>
<div class="row">
    <div class="col-md-4 col-md-offset-1">
            <div class="thumbnail">
                <img src="image/img7.jpg"/>
                <h3>近期演出:</h3>
                <ul style="list-style-type: none">
                     <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                    <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                    <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                    <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                </ul>
            </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="image/img8.jpg"/>
            <h3>近期演出:</h3>
            <ul style="list-style-type: none">
                <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
                <li>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</li>
            </ul>
        </div>
    </div>
    <div class="col-md-2" style="margin-top: -50px;width: 350px">
        <div class="thumbnail">
            <h3>热销榜单</h3>
            <hr/>
            <div class="row">
                <div class="col-md-1">
                    <img src="image/img4.jpg"/>
                </div>
                <div class="col-md-7 col-md-offset-3">
                    <span style="font-size: 16px;">[天津]天津中华曲苑相声专场</span>
                    <p>2016年1月1日~12月31日 天津中华曲苑</p>
                    <p><span style="color: deepskyblue;font-size: 20px">50</span>元起</p>
                </div>

            </div>
            <hr/>
            <ul style="background-color: white;width: 300px;list-style-type: none">
                <li style="border-bottom: 1px solid black"> [北京]陈奕迅 ANOTHER EASON'S LIFE</li>
                <li style="border-bottom: 1px solid black"> [北京]陈奕迅 ANOTHER EASON'S LIFE</li>
                <li style="border-bottom: 1px solid black"> [北京]陈奕迅 ANOTHER EASON'S LIFE</li>
            </ul>
        </div>
    </div>

</div>
<footer style="background-color: black">
    <div class="container">
        <div class="row" style="margin-top:20px;margin-left: -50px">
            <div class="col-xs-6 col-md-2"><img src="image/footer_logo.png" alt=""></div>
            <div class="col-xs-6 col-md-3" style="margin-left: -60px;margin-top: -10px">
                <h2 style="color:silver">微信电影票官网</h2>
                <h5 style="color:silver">在线站好位，覆盖影院全国第一</h5>
            </div>
            <div class="col-xs-6 col-md-2"><img src="image/phoneIcon.png" alt=""></div>
            <div class="col-xs-6 col-md-5" style="margin-top: 80px;margin-left: -300px"><h6>@2015北京微影时代科技有限公司版权所有&nbsp;&nbsp;京ICP备14034406号-2</h6></div>
            <div class="col-xs-6 col-md-3" style="margin-left: -200px;margin-top: -10px">
                <h2 style="color:silver">微信电影票官网</h2>
                <h5 style="color:silver">在线站好位，覆盖影院全国第一</h5>
            </div>
            <div class="col-xs-6 col-md-2"><img src="image/f_wx.png" alt="" style="margin-top: -0px;margin-left: -50px;"></div>
            <div class="col-xs-6 col-md-1" style="margin-top: -54px;margin-left: 20px;"><img src="image/f_wpr.png" alt=""></div>
            <div class="col-xs-6 col-md-3" style="margin-left:1060px;margin-top: -130px">
                <h2 style="color:silver">微信电影票官网</h2>
                <h5 style="color:silver">在线站好位，覆盖影院全国第一</h5>
            </div>
        </div>
    </div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    $(".carousel").carousel({
        interval:5000
    });
</script>
</body>
</html>